<template>
  <div class="bar-chart-wrapper">
    <!-- <button type="button" @click="refreshData">刷新</button> -->
    <BaseEcharts :chartData="realTimeData" ref="bar" height="200px" />
  </div>
</template>

<script>
import BaseEcharts from './echart.vue'
import dayjs from 'dayjs'
export default {
  name: 'BoxLeftB',
  components: {
    BaseEcharts
  },
  data() {
    return {
      barData: [
        { label: '亿联', value1: 28, value2: 50, value3: 70, value4: 90, value5: 98, max: 100 },
        { label: '联达兴', value1: 17, value2: 37, value3: 58, value4: 80, value5: 100, max: 100 },
        { label: '海外', value1: 25, value2: 34, value3: 55, value4: 89, value5: 95, max: 100 },
        { label: '烽火通信', value1: 30, value2: 52, value3: 65, value4: 72, value5: 99, max: 100 },
        { label: '惠尔丰', value1: 18, value2: 44, value3: 62, value4: 79, value5: 98, max: 100 },
        { label: '新大陆', value1: 21, value2: 42, value3: 57, value4: 82, value5: 100, max: 100 }
      ],
      realTimeData: [],
      intervalIns: null
    }
  },
  mounted() {
    this.refreshData()
  },
  methods: {
    refreshData() {
      this.intervalIns && clearInterval(this.intervalIns)
      this.getRealTimeData()
      this.intervalIns = setInterval(this.getRealTimeData.bind(this), 1000 * 60 * 60 * 0.5) // 每半小时刷新
    },
    getRealTimeData() {
      const curHour = dayjs().hour()
      const getKey = hour => {
        if (8 <= hour && hour < 10) return 'value1'
        if (10 <= hour && hour < 13) return 'value2'
        if (13 <= hour && hour < 15) return 'value3'
        if (15 <= hour && hour < 17) return 'value4'
        if (hour >= 17) return 'value5'
        return 'value1'
      }
      this.realTimeData = this.barData.map(item => {
        const valKey = getKey(curHour)
        const value = item[valKey] ? item[valKey] : 0
        console.log('value', value)
        return {
          ...item,
          value,
          valueUnit: value + '%'
        }
      })
    },
    getValueByMinute({ maxValue }) {
      const minuteNow = dayjs().minute()
      const minuteVal = (maxValue / 60) * minuteNow
      return isNaN(minuteVal) ? 0 : +this.toFixed(minuteVal, 0)
    },
    toFixed(n, fixedNum = 2) {
      return ~~(Math.pow(10, fixedNum) * n) / Math.pow(10, fixedNum)
    }
  },
  destroyed() {
    clearInterval(this.intervalIns)
  }
}
</script>

<style scoped></style>
